<template>
  <view class="city-explore-page">
    <!-- 顶部轮播图 -->
    <swiper
      class="top-swiper"
      autoplay
      interval="3000"
      circular
      indicator-dots
      indicator-active-color="#3B82F6"
    >
      <swiper-item v-for="(img, index) in swiperImages" :key="index">
        <image :src="img" class="swiper-img" mode="aspectFill"></image>
      </swiper-item>
    </swiper>

    <!-- 城市介绍 -->
    <view class="module-container city-intro">
      <text class="module-title">泉州介绍</text>
      <rich-text class="intro-content" :nodes="cityIntroNodes"></rich-text>
    </view>

    <!-- 探索进度 -->
    <view class="module-container explore-progress">
      <text class="module-title">探索进度</text>
      <view class="progress-bar-wrapper">
        <view class="progress-bar">
          <view class="progress-current" :style="{ width: progress + '%' }"></view>
        </view>
        <text class="progress-percent">{{ progress }}%</text>
      </view>
    </view>

    <!-- 城市选择 -->
    <view class="module-container city-select">
      <text class="module-title">选择城市</text>
      <picker
        mode="region"
        @change="onRegionChange"
        :value="selectedRegion"
        class="region-picker"
      >
        <view class="picker-display">
          当前选择：{{ selectedRegion[0] }} - {{ selectedRegion[1] }} - {{ selectedRegion[2] }}
        </view>
      </picker>
    </view>
    <view class="module-container city-video">
      <text class="module-title">城市宣传视频</text>
      <video
        class="video-player"
        :src="videoUrl"
        poster="/static/video-poster.jpg"
        controls
        :autoplay="false"
        :loop="false"
      ></video>
    </view>
    <!-- 泉州背景音乐 -->
    <view class="music-module">
      <text class="module-title">泉州背景音乐</text>
      <button class="play-btn" @click="togglePlay">{{ isPlaying ? '暂停' : '播放' }}</button>
      <text class="music-desc">泉州南音 - 泉州传统乐团</text>
      <!-- 音乐进度条 -->
      <view class="progress-container">
        <text class="time">{{ formatTime(currentTime) }}</text>
        <view class="progress-bar">
          <view class="progress-track"></view>
          <view class="progress-current" :style="{ width: musicProgress + '%' }"></view>
        </view>
        <text class="time">{{ formatTime(duration) }}</text>
      </view>
    </view>
    <view class="preference-setting">
      <text class="module-title">偏好设置</text>

      <!-- 出行方式选择 -->
      <view class="option-group">
        <text class="option-title">出行方式</text>
        <radio-group @change="onTravelModeChange">
          <label class="radio-item" v-for="(mode, index) in travelModes" :key="index">
            <radio :value="mode.value" :checked="mode.value === selectedTravelMode" />
            <text class="radio-text">{{ mode.label }}</text>
          </label>
        </radio-group>
      </view>

      <!-- 显示推荐景点开关 -->
      <view class="option-group">
        <text class="option-title">显示推荐景点</text>
        <switch v-model="showRecommend" @change="onShowRecommendChange" />
      </view>

      <!-- 探索半径滑块 -->
      <view class="option-group">
        <text class="option-title">探索半径: {{ exploreRadius }}km</text>
        <slider 
          v-model="exploreRadius" 
          :min="1" 
          :max="20" 
          @change="onExploreRadiusChange" 
        />
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图图片地址（可替换为项目中static目录下的图片或网络图片）
      swiperImages: [
        '/static/city1.png',
        '/static/city2.jpg',
        '/static/city3.jpg'
      ],
      // 城市介绍富文本内容
      cityIntroNodes: [
        {
          type: 'text',
          text: '海上丝绸之路起点 - 泉州\n\n'
        },
        {
          type: 'text',
          text: '历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。\n\n'
        },
        {
          type: 'text',
          text: '著名景点：清源山、开元寺、泉州海交馆、崇武古城、洛阳桥等。\n\n'
        },
        {
          type: 'text',
          text: '特色文化：拥有南音、水密隔舱福船制造等丰富的非物质文化遗产。'
        }
      ],
      // 探索进度
      progress: 60,
      // 城市选择-省市区
      selectedRegion: ['福建省', '泉州市', '丰泽区'],
      videoUrl: '/static/city-video.mp4',
      travelModes: [
        { label: '公交', value: 'bus' },
        { label: '自驾', value: 'selfDriving' },
        { label: '步行', value: 'walk' }
      ],
      // 选中的出行方式，默认选中公交
      selectedTravelMode: 'bus',
      // 是否显示推荐景点，默认显示
      showRecommend: true,
      // 探索半径，默认12km
      exploreRadius: 12,
      audioContext: null,
      // 音频资源地址，可替换为实际的音频文件路径（本地或网络）
      audioUrl: '/static/city-music.mp3',
      isPlaying: false, // 音频是否正在播放
      currentTime: 0, // 当前播放时间（秒）
      duration: 0, // 音频总时长（秒）
      musicProgress: 0 // 音乐进度条百分比
    };
  },
  onLoad() {
    // 创建音频上下文
    this.audioContext = uni.createInnerAudioContext();
    this.audioContext.src = this.audioUrl;

    // 监听音频时间更新
    this.audioContext.onTimeUpdate(() => {
      this.currentTime = this.audioContext.currentTime;
      this.duration = this.audioContext.duration;
      this.musicProgress = (this.currentTime / this.duration) * 100;
    });

    // 监听音频播放结束
    this.audioContext.onEnded(() => {
      this.isPlaying = false;
      this.currentTime = 0;
      this.musicProgress = 0;
    });
  },
  methods: {
    // 省市区选择变化
    onRegionChange(e) {
      this.selectedRegion = e.detail.value;
    },
    onTravelModeChange(e) {
      this.selectedTravelMode = e.detail.value;
      console.log('选中的出行方式：', this.selectedTravelMode);
    },
    // 显示推荐景点开关改变事件
    onShowRecommendChange(e) {
      this.showRecommend = e.detail.value;
      console.log('是否显示推荐景点：', this.showRecommend);
    },
    // 探索半径改变事件
    onExploreRadiusChange(e) {
      this.exploreRadius = e.detail.value;
      console.log('探索半径：', this.exploreRadius + 'km');
    },
    // 切换播放/暂停
    togglePlay() {
      if (this.isPlaying) {
        this.audioContext.pause();
      } else {
        this.audioContext.play();
      }
      this.isPlaying = !this.isPlaying;
    },
    // 格式化时间为 00:00 格式
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const secs = Math.floor(seconds % 60);
      return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
    }
  },
  onUnload() {
    // 页面卸载时，销毁音频上下文，释放资源
    if (this.audioContext) {
      this.audioContext.destroy();
    }
  }
};
</script>

<style scoped>
.city-explore-page {
  padding: 16px;
  background-color: #f9fafb;
}

/* 顶部轮播图样式 */
.top-swiper {
  width: 100%;
  height: 200px;
  margin-bottom: 16px;
  border-radius: 8px;
  overflow: hidden;
}

.swiper-img {
  width: 100%;
  height: 100%;
}

/* 通用模块容器样式 */
.module-container {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.module-title {
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
  display: block;
}

/* 城市介绍样式 */
.intro-content {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.6;
}

/* 探索进度样式 */
.progress-bar-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background-color: #e5e7eb;
  border-radius: 4px;
  margin-right: 12px;
}

.progress-current {
  height: 100%;
  background-color: #3b82f6;
  border-radius: 4px;
}

.progress-percent {
  font-size: 14px;
  color: #3b82f6;
  min-width: 40px;
  text-align: right;
}

/* 城市选择样式 */
.region-picker {
  width: 100%;
}

.picker-display {
  padding: 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  color: #6b7280;
  background-color: #f9fafb;
}
.video-player {
  width: 100%;
  height: 240px;
  border-radius: 6px;
}
.preference-setting {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  margin: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.option-group {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}

.option-title {
  font-size: 14px;
  color: #4b5563;
  margin-right: 12px;
  width: 120px;
}

.radio-group {
  display: flex;
}

.radio-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.radio-text {
  font-size: 14px;
  color: #4b5563;
  margin-left: 6px;
}

slider {
  flex: 1;
}
.music-module {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  margin: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.play-btn {
  width: 120px;
  height: 44px;
  background-color: #2563eb;
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  margin-bottom: 12px;
}

.music-desc {
  font-size: 14px;
  color: #4b5563;
  margin-bottom: 12px;
}

.progress-container {
  width: 100%;
  display: flex;
  align-items: center;
}

.time {
  font-size: 12px;
  color: #6b7280;
  min-width: 40px;
  text-align: center;
}

.progress-bar {
  flex: 1;
  height: 4px;
  background-color: #e5e7eb;
  border-radius: 2px;
  margin: 0 10px;
  position: relative;
}

.progress-track {
  height: 100%;
  width: 100%;
  background-color: #d1d5db;
  border-radius: 2px;
}

.progress-current {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #3b82f6;
  border-radius: 2px;
}
</style>